<!-- 库存预警 -->
<template>
	<view>
		<hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn">
		  <!-- <view slot="bottom">
		    <template>
		      <view class="input-product">
		        <u-search placeholder="搜索或添加产品" v-model="searchData.keywords" @change="onSearchChange" :showAction="false"></u-search>
		      </view>
		    </template>
		  </view> -->
		</hx-navbar>
		<view class="search-box flex" ref="tabBarSearch">
			<view class="input-product m-b-40">
			  <u-search placeholder="产品编号、产品名称" bgColor="rgb(242 242 242 / 0)" searchIconColor="rgb(242 242 242 / 65%)" placeholderColor="rgb(242 242 242 / 85%)" v-model="searchData.keywords" @change="onSearchChange" :showAction="false"></u-search>
			</view>
		</view>
		<u-scroll-list :indicator="false" class="p-b-0">
			<view class="top-view p-t-20">
				<view class="flex flex-sa f-35 m-b-10">
					<view class="f-35">
						<view class="flex flex-c f-32 text-color"> 总匹数 </view>
						<view class="flex flex-c f-30 m-b-10"> {{total_data.canUsePiecesCount||0}} </view>
					</view>
					<view class="f-35">
						<view class="flex flex-c f-32 text-color"> 总米数 </view>
						<view class="flex flex-c f-30 m-b-10"> {{total_data.canUseQuantity||0}} </view>
					</view>
				</view>
			</view>
		</u-scroll-list>
		<clHeadTab :modelData="modelData" @change="tabChange" class="tab-bg"></clHeadTab>
		
		<view class="list-box">
			<view class="item-dl m-b-20" v-for="(item,index) in list" :key="index" @click="nextPage(item)">
				<view class="dt-box">
					{{item.storeName}}
				</view>
				<view class="dd-box">
					<view class="name">
						<text class="m-r-10">{{item.name}}{{item.code}}</text>
						<text>{{item.colorNumber}}</text>
					</view>
					<view class="table-view">
						<view class="tr-view">
							<view class="td-view">
								<text class="grey p-r-8">匹数</text>
								<text>{{item.canUsePiecesCount}}匹</text>
							</view>
							<view class="td-view">
								<text class="grey p-r-8">上限</text>
								<text>{{item.quantityMax}}匹</text>
							</view>
							<view class="td-view">
								<text class="grey p-r-8">下限</text>
								<text>{{item.piecesCountMin}}匹</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		
		
		
		
		<!-- 筛选弹框 -->
		<u-popup class="sidebar" :show="show" mode="right" overlayOpacity="0.3" @close="show = false">
		  <view class="pop-view p-t-88">
		    <view class="">
		    	<view class="cl-cell flex flex-sb">
		    		<view class="flex" style="flex: 1;" @click="toWarehouse">
		    			<view class="title">
		    				仓库
		    			</view>
		    			<view class="value">
		    				{{sideObj.storeName}}
		    			</view>
		    		</view>
		    		<view class="icon">
		    			<u-icon name="close" color="#999" size="20" v-if="sideObj.storeName" @click="sideObj.storeName=''"></u-icon>
		    			<u-icon name="arrow-right" color="#999" v-else></u-icon>
		    		</view>
		    	</view>
		    	<view class="cl-cell flex flex-sb">
		    		<view class="flex" style="flex: 1;" @click="toProduct">
		    			<view class="title">
		    				产品
		    			</view>
		    			<view class="value">
		    				{{sideObj.code}} {{sideObj.name}}
		    			</view>
		    		</view>
		    		<view class="icon">
		    			<u-icon name="close" color="#999" size="20" v-if="sideObj.name" @click="sideObj.name=''"></u-icon>
		    			<u-icon name="arrow-right" color="#999" v-else></u-icon>
		    		</view>
		    	</view>
		    </view>
		    <view class="fot-btn flex flex-sw p-l-10 p-r-10">
		    	<u-button text="重置" shape="circle" class="reset m-r-10" @click="onReset"></u-button>
		    	<u-button text="搜索" shape="circle" color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))"  @click="onSearch"></u-button>
		    </view>
		  </view>
		</u-popup>
	</view>
</template>

<script>
	import {listStockMaxPage, listStockMinPage} from '@/apis/inventory/inventory.js'
	import clHeadTab from "@/components/cl-head-tab/cl-head-tab.vue";
	
	export default {
		components: {
		  clHeadTab
		},
		name: 'Warning',
		data() {
			return {
				modelData: [
				  { label: "库存过高", name: "high" },
				  { label: "库存过低", name: "low" }
				],
				config: {
				  title: "库存预警",
				  color: "#ffffff",
				  //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
				  backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
				  rightButton: [
				    {
				      key: "btn1",
				      icon: "&#xe888;",
				      position: "left",
				    },
				  ],
				},
				show: false,
				searchData: {},
				total_data: {},
				params: {
					data: {},
					page: {
						current: 1,
						order: "desc",
						size: 10,
						sort: ""
					}
				},
				list: [],
				componentsName: "high",
				sideObj: {
					storeName: '',
					name: '',
					code: "",
					spuId: ""
				}
			}
		},
		onLoad() {
			// 库存
			uni.$on('on-warehouse-data',(res)=>{
				let {name, id} = res;
				if(this.show) {
					this.sideObj.storeName = name;
					this.sideObj.storeId = id;
				}
			})
			// 产品
			uni.$on('productData',(res)=>{
				let {name, code, id} = res;
				if(this.show) {
					this.sideObj.name = name;
					this.sideObj.code = code;
					this.sideObj.spuId = id;
				}
			})
		},
		onUnLoad() {
			uni.$off('on-warehouse-data')
			uni.$off('productData')
		},
		methods: {
			// 关闭
			onClose(val) {
				this.slide[val] = ''
			},
			// 跳转产品
			toProduct() {
				uni.navigateTo({
					url: '/pages/application/pages/cloth/inventory/matching/product/index'
				})
			},
			tabChange(item) {
				this.componentsName = item.name;
				this.params.page.current = 1;
				if(item.name == 'high') {
					this.getListStockMaxPage()
				} else {
					this.getListStockMinPage()
				}
			},
			clickBtn(item) {
			  if (item.key === "btn1") {
			    this.show = true
			  }
			},
			// 获取列表
			getListStockMaxPage() {
				listStockMaxPage(this.params).then(res=>{
					if (!res.flag) return;
					this.list = this.params.page.current>1?[...this.list,res.data.records]:res.data.records;
				})
			},
			// 库存过低
			getListStockMinPage() {
				listStockMinPage(this.params).then(res=>{
					if (!res.flag) return;
					this.list = this.params.page.current>1?[...this.list,res.data.records]:res.data.records;
				})
			},
			// 跳转到下一页
			nextPage(val) {
				let data = encodeURIComponent(JSON.stringify(val))
				uni.navigateTo({
					url:`/pages/application/pages/cloth/inventory/matching/quantity/list?data=${data}`
				})
			},
			// 去选择仓库
			toWarehouse() {
				this.$Router.push({
				  path: "/pages/application/pages/information/warehouse/warehouse",
				  query: {
				    type: 'list'
				  }
				});
			},
			// 重置
			onReset() {
				this.sideObj = {
					storeName: '',
					name: ''
				}
			},
			// 搜索
			onSearch() {
				this.params.data = this.sideObj;
				this.close()
			},
			close() {
			  this.show = false
			  this.params.page.current = 1;
			  if(this.componentsName == 'high') {
			  	this.getListStockMaxPage()
			  } else {
			  	this.getListStockMinPage()
			  }
			},
		},
		onShow() {
			this.getListStockMaxPage()
		}
	}
</script>

<style lang="scss" scoped>
	.top-view {
		flex: 1;
		background: linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246));
		color: #fff;
	}
	.search-box {
		padding-top: 30rpx;
		justify-content: center;
		background: linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246));
	}
	.input-product {
	  width: 95%;
	  border-radius: 50upx;
	  height: 70upx;
	  line-height: 70upx;
	  color: #fff;
	  display: flex;
	  background: rgba(248, 248, 248, 0.34);
	}
	.list-box {
		padding: 20rpx 20rpx 20rpx;
		.item-dl {
			background: #fff;
			padding: 20rpx;
			box-shadow: 0px 20rpx 26rpx #c4c4c4;
			border-radius: 10rpx;
			.dt-box {
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
				padding-bottom: 24rpx;
				padding-top: 6rpx;
			}
			.dd-box {
				.name {
					font-size: 30rpx;
					padding-bottom: 20rpx;
				}
				.table-view {
					background-color: #eee;
					border-radius: 6rpx;
					padding: 20rpx 20rpx;
					.tr-view {
						display: flex;
						padding-bottom: 20rpx;
						.td-view { flex: 1;}
						&:last-child{
							padding-bottom: 0;
						}
					}
				}
			}
		}
	}
	.tab-bg {
		background: linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246));
	}
</style>